import classnames from 'classnames'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { Article } from '@/store/reducer/search'
import history from '@/utils/history'
import { Image } from 'antd-mobile'
import dayjs from 'dayjs'
import { useDispatch } from 'react-redux'
import { setArticleMark } from '@/store/action/article'

interface Props
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {
  article?: Article
  className?: string
}

export default function ArticleItem({ article, className, ...res }: Props) {
  const dispatch = useDispatch()
  if (!article) return null

  const handleSetMark = () => {
    dispatch(setArticleMark({ visible: true, article_id: article.art_id }))
  }

  const {
    cover: { type, images },
  } = article

  return (
    <div {...res} className={classnames(styles.root, className)}>
      {/* t3: 三图结构 none-mt没有图片结构  */}
      <div
        onClick={() => history.push('/article/' + article.art_id)}
        className={classnames('article-content', {
          t3: type === 3,
          'none-mt': type === 0,
        })}
      >
        <h3>{article.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images.map((item, index) => (
              <div key={index} className="article-img-wrapper">
                {/* <img src={item} alt="" /> */}
                <Image lazy src={item} fit="cover" />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{article.aut_name}</span>
        <span>{article.comm_count}评论</span>
        <span>{dayjs(article.pubdate).fromNow()}</span>

        <span className="close" onClick={handleSetMark}>
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  )
}
